<template>
  <Modal v-model="visible" width="840" class="source-model">
      <div class="source-menu">
        <h1>图片库</h1>
        <ul>
          <li class="active">
            我的图片
          </li>
          <li>最近上传</li>
          <li>
            全部图片
          </li>
        </ul>
      </div>
      <div class="source-content">
        <Tabs value="name1">
            <TabPane label="全部" name="name1">
              <div class="source-list">
                <div class="source-item" v-for="i in 20" @click="handlerAddImg">
                  <img src="http://oihdlfeky.bkt.clouddn.com/17-4-12/76284943-file_1491990447624_fe9a.png" alt="">
                </div>
              </div>
            </TabPane>
            <TabPane label="元素" name="name2">标签二的内容</TabPane>
            <TabPane label="背景" name="name4">标签三的内容</TabPane>
            <TabPane label="文字" name="name5">标签三的内容</TabPane>
            <TabPane label="边框" name="name3">标签三的内容</TabPane>
        </Tabs>
      </div>
    <div slot="footer"></div>
  </Modal>
</template>

<script>
import { Vue, Component, Watch, Model, Emit} from 'vue-property-decorator'
import ModalSync from "@/mixins/ModalSync"
import {
  State,
  Getter,
  Action
} from 'vuex-class'
@Component({
  mixins: [ModalSync]
})
export default class SourceImg extends Vue {
  @Action actAddElement
  visible=false
  handlerAddImg ():void {
    let newElement = {
      type: "img",
      extra: {
        src: "http://oihdlfeky.bkt.clouddn.com/17-4-12/76284943-file_1491990447624_fe9a.png"
      }

    }
    this.actAddElement(newElement)
    this.visible = false
  }
}

</script>
<style lang="less" scoped>
.source-img-model{

}
</style>
